<template>
<div>

  <Layout>
        <Sider hide-trigger style="background:#fff" width=135>
          <Tree :data="lists" @on-select-change='getpId'></Tree>

        </Sider>
        <Layout>
            <Content>
              <Upload
                multiple
                type="drag"
                name="avatar"
                action="http://10.31.160.71:3000/upload/upload"
                :before-upload="bupload"
                :data="cateData"
                :on-success="successful">
                <div style="padding: 20px 0">
                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                    <p>Click or drag files here to upload</p>
                </div>
              </Upload>
              <Input v-model="filter.filename">
                  <Button slot="append" icon="ios-search" @click="search"></Button>
              </Input>
              <Table border :columns="columns7" ref="selection" :data="list" @on-selection-change="selected" @on-row-click="getID"></Table>
              <Button @click="handleSelectAll(true)" style="margin-top:10px">Set all selected</Button>
              <Button @click="handleSelectAll(false)" style="margin-top:10px">Cancel all selected</Button>


              <Button type="error" style="margin-top:10px" @click="delectSelected">delectSelected</Button>
              <Page :total="total" size="small" show-elevator show-sizer :page-size-opts="pageSizeOpts" :styles="Pstyle" @on-change="changePage" @on-page-size-change="changePageSize"></Page>

            </Content>

        </Layout>
    </Layout>

</div>

</template>
<script>
import { eventBus } from '../bus';
import Base from "../base";
export default {
  mixins:[Base],
  data() {
    return {
      data1: [],
      cateData:{
        cateId:this.uploadId,
        username:this.$route.query.user
      },
      uploadId:'',
      modules:{type:'upload'},
      Pstyle: { marginTop: "10px" },
      formItem: {
        filename:'',
        size:'',
        path:'',
        cateId:''
      },
      lists:[],
      columns7: [
        {
            type: 'selection',
            width: 60,
            align: 'center'
        },
        {
          title: "Filename",
          key: "filename",
        },
        {
          title: "Path",
          key: "path",
        },
        {
          title: "Size",
          width: 100,
          key: "size"
        },
        {
          title: "Date",
          width: 100,
          align: 'center',
          key: "date",
          render:(h,params)=>{
            let d=params.row.date;
            return d.substring(0,9)
          }
        },
        {
          title: "Action",
          key: "action",
          width: 100,
          align: "center",
          render: (h, params) => {
            return h("div", [

              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "delete"
              )
            ]);
          }
        }
      ]

    };
  },
  methods:{
    handleRender () {
      let pid=this.prevID._id;
      console.log(pid);
      this.$http
      .get(`http://10.31.160.71:3000/upload/data/`+pid)
      .then(response => {
        this.formItem.filename=response.data.filename;
        this.formItem.path=response.data.path;
        this.formItem.size=response.data.size;
        this.uploadId='';
        this.modal10 = true;
      });

    },
    bupload(){
      this.cateData.cateId = this.uploadId;
      if(!this.cateData.cateId){
        console.log(1);
        this.warning(true);
        return false;
      }else{
        this.success(true)
      }
    },
    successful(res, file){
      this.updata();
      console.log(1)
    },
    //新闻分类
    getData(){
      this.axios.get('http://10.31.160.71:3000/cate/list/3')
      .then((response) => {
        this.lists = response.data;
      })
    },

    warning (nodesc) {
        this.$Notice.warning({
            title: 'Please select category',
            desc: nodesc ? '' : ' '
        });
    },
    //获取当前新闻分类的ID
    getpId(data){
      this.uploadId=data[0]._id;
      // console.log(this.uploadId)
      this.formItem.cateId=this.uploadId;
      Object.assign(this.formItem,this.filter);
      this.$http
        .post(`http://10.31.160.71:3000/upload/list`, this.formItem)
        .then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
        });
    }
  },
  created(){
    this.getData();
    this.updata();
  }
};
</script>

